<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<thead>
				<th> <input type="checkbox" id="thead" /></th>
				<th>全选</th>
			</thead>
			<tbody>
				<tr>
					<td> <input type="checkbox" /></td>
					<td>Sum</td>
				</tr>
				<tr>
					<td> <input type="checkbox" /></td>
					<td>January</td>
				</tr>
				<tr>
					<td> <input type="checkbox" /></td>
					<td>February</td>
				</tr>
			</tbody>
		</table>
	</body>
	<script type="text/javascript">
		var thead = document.querySelector("#thead");
		var tdList = document.querySelector("tbody").querySelectorAll("input");
		var count = 0;

		thead.onclick = function() {
			for (var i = 0; i < tdList.length; i++) {
				tdList[i].checked = thead.checked;
			}
		}
		for (var i = 0; i < tdList.length; i++) {
			tdList[i].onclick = function() {
				if (this.checked) {
					count++;
				} else {
					count--;
				}
				if (count == 3) {
					thead.checked = true;
				} else {
					thead.checked = false;
				}
			}
		}
	</script>
	<style type="text/css">
	</style>
</html>
